@keyframes fireworks {
  0% {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
  50%, 100% {
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
  }
}
@keyframes random {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200%, 50%) scale(0.8);
  }
  50% {
    transform: translate(80%, 80%) scale(1.2);
  }
  75% {
    transform: translate(20%, 60%) scale(0.65);
  }
}
@keyframes random-color {
  0% {
    background-color: #ffefad;
  }
  25% {
    background-color: #ffadad;
  }
  50% {
    background-color: #aeadff;
  }
  75% {
    background-color: #adffd9;
  }
}
body {
  background: #000;
  overflow: hidden;
}

.fireworks {
  position: absolute;
  width: 150px;
  aspect-ratio: 1/1;
  -webkit-mask: url(../assets/images/fireworks.png) right top no-repeat;
          mask: url(../assets/images/fireworks.png) right top no-repeat;
  -webkit-mask-size: auto 150px;
          mask-size: auto 150px;
  animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite, random-color 1s infinite;
}